<template>
  <a-form-model ref="formRef" :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-tabs :default-active-key="1" :tab-position="tabPosition" v-model="activeKey" @change="callback">
      <a-tab-pane v-for="item in tabTypes" :key="item.key">
        <span slot="tab">
          <img :class="activeKey > 11 ? 'tab-img org' : 'tab-img'" :src="require('@/assets' + item.image)" />
          {{ item.label }}
        </span>
        <!--行为管控模型配置-复吸风险告警-->
        <template v-if="activeKey === 1">
          <a-form-model-item :label="item.alarmType" v-for="(item, index) in formData.alarmConfigList" :key="index">
            该社戒社康人员与其他社戒社康人员
            <a-input class="input" v-model="item.contactsNumber" placeholder="请输入" />天内联系次数为
            <a-input class="input" v-model="item.contactDays" placeholder="请输入" />次以上; <br />
            或短信A类关键词达<a-input class="input" v-model="item.akeyWord" placeholder="请输入" />次;<br />
            或短信B类关键词达<a-input class="input" v-model="item.bkeyWord" placeholder="请输入" />次;<br />
            或短信C类关键词达<a-input class="input" v-model="item.ckeyWord" placeholder="请输入" />次;<br />
            或短信D类关键词达<a-input class="input" v-model="item.dkeyWord" placeholder="请输入" />次;<br />
            或短信E类关键词达<a-input class="input" v-model="item.ekeyWord" placeholder="请输入" />次;<br />
            或关键词命中次数达<a-input class="input" v-model="item.keyWord" placeholder="请输入" />次;
          </a-form-model-item>
        </template>
        <!--行为管控模型配置-聚吸风险告警-->
        <template v-if="activeKey === 2">
          <a-form-model-item label="特定区域">
            <j-search-select-tag class="select area" mode="multiple" allowClear
              v-model="formData.drugAlarmModelConfig.regionId" :dictOptions="options1" placeholder="请选择区域" />
          </a-form-model-item>
          <a-form-model-item label="红色告警">
            橙色告警基础上，<a-input class="input" v-model="formData.drugAlarmModelConfig.redAlarmTime"
              placeholder="请输入" />分钟内社戒社康人员轨迹一致
          </a-form-model-item>
          <a-form-model-item label="红色告警">
            社戒社康人员进入特定区域，且至少<a-input class="input" v-model="formData.drugAlarmModelConfig.orangeAlarmNumber"
              placeholder="请输入" />人实时位置小于
            <a-input class="input" v-model="formData.drugAlarmModelConfig.orangeAlarmMeters" placeholder="请输入" />
            米，且这些人之间有通联关系的
          </a-form-model-item>
        </template>
        <!--行为管控模型配置-擅自离开执行地告警-->
        <template v-if="activeKey === 3">
          <a-form-model-item label="擅自离开执行地" :label-col="{ span: 3 }">
            执行地管辖对象未满足以下条件就擅自离开设定的执行地区域
            <a-tooltip placement="topLeft" title="请在“重点区域配置”绘制执行地区域后绑定相对应的部门">
              <a-icon type="info-circle" style="font-size: 14px;" />
            </a-tooltip><br />
            条件一：人员请假状态时<br />
            条件二：变更执行地审批通过后<br />
            条件三：异地管控审批通过后<br />
            条件四：人员戒毒康复已完成<br />
          </a-form-model-item>
          <a-form-model-item :label="item.alarmType" v-for="(item, index) in formData.executionConfig" :key="index">
            擅自离开社区戒毒社区康复执行地<a-input class="input" v-model="item.leaveDays" placeholder="请输入" />天及以上，或离开
            <a-input class="input" v-model="item.leaveTimes" placeholder="请输入" />次及以上且累计时长
            <a-input class="input" v-model="item.accumulatedDays" placeholder="请输入" />天及以上的人员
          </a-form-model-item>
        </template>
        <!--行为管控模型配置-进出高危区域告警-->
        <template v-if="activeKey === 4">
          <a-form-model-item label="高危区域">
            <j-search-select-tag class="select area" mode="multiple" allowClear v-model="formData.areaConfig.regionId"
              :dictOptions="options1" placeholder="请选择区域" />
          </a-form-model-item>
          <a-form-model-item label="红色告警">
            目标进入高危区域后，停留时长超过<a-input class="input" v-model="formData.areaConfig.redDate" placeholder="请输入" />分钟；<br />
            目标离开高危区域
          </a-form-model-item>
          <a-form-model-item label="橙色告警">
            目标进入高危区域
          </a-form-model-item>
          <a-form-model-item label="黄色告警">
            目标靠近重点区域周边<a-input class="input" v-model="formData.areaConfig.yellowMeters" placeholder="请输入" />米范围内，徘徊时间
            <a-input class="input" v-model="formData.areaConfig.yellowWanderingTime" placeholder="请输入" />分钟以上
          </a-form-model-item>
        </template>
        <!--行为管控模型配置-轨迹伴随挖掘-->
        <template v-if="activeKey === 5">
          <a-form-model-item label="红色告警">
            满足橙色告警时，且<a-input v-model="formData.miningConfig.redAlarmDate" class="input time"
              format="HH:mm" />时间内目标人群轨迹一致
          </a-form-model-item>
          <a-form-model-item label="橙色告警">
            至少<a-input class="input" v-model="formData.miningConfig.orangePeopleNumber" placeholder="请输入" />人且实时距离小于
            <a-input class="input" v-model="formData.miningConfig.orangeDistance" placeholder="请输入" />米
          </a-form-model-item>
        </template>
        <!--行为管控模型配置-异常出行告警-->
        <template v-if="activeKey === 6">
          <a-form-model-item :label="item.alarmType" v-for="(item, index) in formData.travelAlarmConfigList"
            :key="index">
            至少<a-input class="input" v-model="item.travelersNumber" placeholder="请输入" />
            人在同一天乘坐相同车次或航班
          </a-form-model-item>
        </template>
        <!--行为管控模型配置-异常外地通联告警-->
        <template v-if="activeKey === 7">
          <a-form-model-item label="指定外地区域">
            <j-search-select-tag class="select area" mode="multiple" allowClear
              v-model="formData.communeAlarmConfig.regionId" :dictOptions="options1" placeholder="请选择区域" />
          </a-form-model-item>
          <a-form-model-item label="红色告警">
            一天内与特定外地地区通联多次通联次数至少<a-input class="input" v-model="formData.communeAlarmConfig.redAlarmTimes"
              placeholder="请输入" />次
          </a-form-model-item>
          <a-form-model-item label="橙色告警">
            一天内与特定外地地区通联多次通联次数至少<a-input class="input" v-model="formData.communeAlarmConfig.orangeAlarmTimes"
              placeholder="请输入" />次
          </a-form-model-item>
          <a-form-model-item label="黄色告警">
            一天内与特定外地地区通联多次通联次数至少<a-input class="input" v-model="formData.communeAlarmConfig.yellowAlarmTimes"
              placeholder="请输入" />次
          </a-form-model-item>
        </template>
        <!--行为管控模型配置-异常活跃人员告警-->
        <template v-if="activeKey === 8">
          <a-form-model-item :label="item.alarmType" v-for="(item, index) in formData.foreignAlarmConfigs" :key="index">
            在<a-input class="input" v-model="item.minute" placeholder="请输入" />分钟内，通联次数至少
            <a-input class="input" v-model="item.times" placeholder="请输入" />次
          </a-form-model-item>
        </template>
        <!--行为管控模型配置-异常行为告警-->
        <template v-if="activeKey === 9">
          <a-form-model-item :label="item.alarmType" v-for="(item, index) in formData.behaviorAlarmConfigs"
            :key="index">
            该社戒社康人员在<a-input class="input" v-model="item.withinDays" placeholder="请输入" />天内，定位在同一位置或一个月内超过
            <a-input class="input" v-model="item.moreDays" placeholder="请输入" />天无轨迹数据；
          </a-form-model-item>
        </template>
        <!--行为管控模型配置-短信签到告警-->
        <template v-if="activeKey === 10">
          <a-form-model-item :label="item.alarmType" v-for="(item, index) in formData.smsSignAlarmConfigs" :key="index">
            该社戒社康人员在<a-input class="input" v-model="item.withinDays" placeholder="请输入" />天内，超过
            <a-input class="input" v-model="item.moreDays" placeholder="请输入" />次未打卡；
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-left: 22px;">
            <div style="color:red">注：该规则仅适用于社戒社康人员中使用老人机的人群</div>
          </a-form-model-item>
        </template>
        <!--行为管控模型配置-异常资金往来告警-->
        <template v-if="activeKey === 11">
          <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-left: 22px;">
            <div class="int">
              在<a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input-number class="input" v-model="formData.fundAlarmConfig.day1" placeholder="输入天数" />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>天内，每天转账次数大于
              <a-input class="input" v-model="formData.fundAlarmConfig.transfersNumber" placeholder="请输入" />次的人员
            </div>
            <div class="int">
              在<a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input-number class="input" v-model="formData.fundAlarmConfig.day2" placeholder="输入天数" />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>天内，转账金额在
              <j-search-select-tag class="select" v-model="formData.grade" :dictOptions="options2" placeholder="请选择" />
              等级以上的行为超过<a-input class="input" v-model="formData.fundAlarmConfig.transfersNumber2"
                placeholder="请输入" />次的人员
            </div>
          </a-form-model-item>
        </template>
        <!--情报挖掘模型配置-涉毒作案手机模型-->
        <template v-if="activeKey === 12">
          <a-form-model-item label="情报规则">
            <div class="int">
              时间段在<a-time-picker v-model="formData.crimeModel.startTime" class="input time" format="HH:mm"
                valueFormat="HH:mm" />点至
              <a-time-picker v-model="formData.crimeModel.endTime" class="input time" format="HH:mm"
                valueFormat="HH:mm" />点，且近
              <a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input-number class="input" v-model="formData.crimeModel.day" placeholder="输入天数" />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>天内与社戒社康人员通联超过22
              <a-input class="input" v-model="formData.crimeModel.frequency" placeholder="请输入" />次的人员
            </div>
          </a-form-model-item>
        </template>
        <!--情报挖掘模型配置-涉毒群体挖掘-->
        <template v-if="activeKey === 13">
          <a-form-model-item label="情报规则">
            <div class="int">
              时间范围在距今<a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input-number class="input" v-model="formData.groupMining.communicationDay" placeholder="输入天数" />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>天内，社戒社康人员在任意
              <a-input class="input" v-model="formData.groupMining.minute" placeholder="请输入" />分钟内与
              <a-input class="input" v-model="formData.groupMining.number" placeholder="请输入" />个以上号码通联
            </div>
            <div class="int">
              时间范围在距今<a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input-number class="input" v-model="formData.groupMining.massSmsDay" placeholder="输入天数" />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>天内，收到社戒社康人员的群发短信
            </div>
          </a-form-model-item>
        </template>
        <!--情报挖掘模型配置-异常通联行为发现-->
        <template v-if="activeKey === 14">
          <a-form-model-item label="情报规则">
            <div class="int">
              <a-tooltip :trigger="['hover']" placement="topLeft" overlay-class-name="numeric-input">
                <template slot="title"> 最多输入30天 </template>
                <a-input-number class="input" v-model="formData.behavior.day" type="number" placeholder="输入天数" />
                <a-icon type="info-circle" style="font-size: 14px;" />
              </a-tooltip>天内，每天在固定时间段
              <a-time-picker v-model="formData.behavior.startTime" class="input time" format="HH:mm"
                valueFormat="HH:mm" />点至
              <a-time-picker v-model="formData.behavior.endTime" class="input time" format="HH:mm"
                valueFormat="HH:mm" />点与社戒社康人员进行通联，超过
              <a-input class="input" v-model="formData.behavior.exceedDay" placeholder="请输入" />天的人员
            </div>
          </a-form-model-item>
        </template>
        <a-form-model-item label="是否开启">
          <a-switch v-model="enabled" checked-children="开" un-checked-children="关" />
        </a-form-model-item>
        <a-form-model-item class="submit-form-model-item" :wrapper-col="noLabelwrapperCol">
          <a-space>
            <a-button type="primary" @click="onSubmit">保存</a-button>
          </a-space>
        </a-form-model-item>
      </a-tab-pane>
    </a-tabs>
  </a-form-model>
</template>

<script>
import * as alarmServiceApi from '@/api/sjsk/alarmService'
export default {
  components: {},
  data() {
    return {
      labelCol: { span: 2, offset: 0 },
      wrapperCol: { span: 20 },
      noLabelwrapperCol: { span: 19, offset: 1 },
      tabPosition: 'left',
      enabled: true,
      config: {},
      configList: [],
      activeKey: 1,
      tabTypes: [],
      options1: [
        // {text: '假地址1', value: '1'},
        // {text: '假地址2', value: '2'},
        // {text: '假地址3', value: '3'},
        // {text: '假地址4', value: '4'},
      ],
      options2: [
        { text: 'A级', value: '1' },
        { text: 'B级', value: '2' },
        { text: 'C级', value: '3' },
        { text: 'D级', value: '4' },
      ],
      fieldKeys: [
        { label: '复吸风险告警配置列表', value: '1', field: 'alarmConfigList', type: 'array', image: '/icon/u134600.svg' },
        { label: '聚吸风险告警模型配置', value: '2', field: 'drugAlarmModelConfig', type: 'object', image: '/icon/u134600.svg' },
        { label: '擅自离开执行地告警配置', value: '3', field: 'executionConfig', type: 'array', image: '/icon/u134600.svg' },
        { label: '进出高危区域告警配置', value: '4', field: 'areaConfig', type: 'object', image: '/icon/u134600.svg' },
        { label: '轨迹伴随挖掘配置', value: '5', field: 'miningConfig', type: 'object', image: '/icon/u134600.svg' },
        { label: '异常出行告警配置', value: '6', field: 'travelAlarmConfigList', type: 'array', image: '/icon/u134600.svg' },
        { label: '异常外地通联告警配置', value: '7', field: 'communeAlarmConfig', type: 'object', image: '/icon/u134600.svg' },
        { label: '异常活跃人员告警配置', value: '8', field: 'foreignAlarmConfigs', type: 'array', image: '/icon/u134600.svg' },
        { label: '异常行为告警配置', value: '9', field: 'behaviorAlarmConfigs', type: 'array', image: '/icon/u134600.svg' },
        { label: '短信签到告警配置', value: '10', field: 'smsSignAlarmConfigs', type: 'array', image: '/icon/u134600.svg' },
        { label: '异常资金往来告警配置', value: '11', field: 'fundAlarmConfig', type: 'object', image: '/icon/u134600.svg' },
        { label: '涉毒作案手机模型', value: '12', field: 'crimeModel', type: 'object', image: '/icon/u20918.svg' },
        { label: '涉毒群体挖掘', value: '13', field: 'groupMining', type: 'object', image: '/icon/u20918.svg' },
        { label: '异常通联行为发现', value: '14', field: 'behavior', type: 'object', image: '/icon/u20918.svg' },
      ],
      // 行为管控模型配置-路由地址
      routePath1: '/configure/model/behaviorControl',
      // 情报挖掘模型配置-路由地址
      routePath2: '/configure/model/informationMining',
    }
  },
  computed: {
    formData() {
      let field = this.$options.filters.filterArray(this.activeKey, this.fieldKeys, 'value', 'field')
      let type = this.$options.filters.filterArray(this.activeKey, this.fieldKeys, 'value', 'type')
      const obj = {
        configType: this.activeKey,
        status: this.enabled ? 1 : 0
      }
      if (!obj.hasOwnProperty(field)) {
        this.$set(obj, field, type == 'array' ? this.configList : this.config)
      }
      return obj
    }
  },
  created() {
    this.getRouteQuery(this.$route)
  },
  watch: {
    $route(data) {
      this.getRouteQuery(data)
    }
  },
  methods: {
    // 提交保存
    onSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          if (this.activeKey == 11 && this.formData.fundAlarmConfig.day1 > 30) {
            this.$message.warning("不能超过30天！")
            return
          }
          if (this.activeKey == 11 && this.formData.fundAlarmConfig.day2 > 30) {
            this.$message.warning("不能超过30天！")
            return
          }
          if (this.activeKey == 12 && this.formData.crimeModel.day > 30) {
            this.$message.warning("不能超过30天！")
            return
          }
          if (this.activeKey == 13 && this.formData.groupMining.communicationDay > 30) {
            this.$message.warning("不能超过30天！")
            return
          }
          if (this.activeKey == 13 && this.formData.groupMining.massSmsDay > 30) {
            this.$message.warning("不能超过30天！")
            return
          }
          if (this.activeKey == 14 && this.formData.behavior.day > 30) {
            this.$message.warning("不能超过30天！")
            return
          }
          
          let api
          if (this.$route.path === this.routePath1) {
            api = alarmServiceApi.addBehaviorControlModelConfig(this.formData)
          } else if (this.$route.path === this.routePath2) {
            api = alarmServiceApi.addInformationMiningModelConfig(this.formData)
          }
          if (!api) return
          api.then(res => {
            if (res.success) {
              this.$message.success(res.message ? res.message : '操作成功')
            } else {
              this.$message.warn(res.message ? res.message : '操作失败')
            }
          })
            .catch(e => {
              this.$message.warn('操作失败！')
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 初始化模型配置项
    initTabTypes(routePath) {
      this.$initDictOptions('model_type').then((res) => {
        if (res.success) {
          this.tabTypes = res.result.map((item, index) => {
            if (routePath === this.routePath1 && index <= 10) {
              return {
                label: item.label,
                key: Number(item.value),
                image: this.$options.filters.filterArray(Number(item.value), this.fieldKeys, 'value', 'image')
              }
            }
            if (routePath === this.routePath2 && index > 10) {
              return {
                label: item.label,
                key: Number(item.value),
                image: this.$options.filters.filterArray(Number(item.value), this.fieldKeys, 'value', 'image')
              }
            }
          }).filter(obj => obj !== undefined)
        }
      })
    },
    // 获取配置详情
    initForm() {
      let field = this.$options.filters.filterArray(this.activeKey, this.fieldKeys, 'value', 'field')
      let type = this.$options.filters.filterArray(this.activeKey, this.fieldKeys, 'value', 'type')
      alarmServiceApi.getModelConfig(this.activeKey)
        .then(res => {
          if (res.success) {
            let result = res.result
            if (result && Object.keys(result).length > 0) {
              let typeofObject = typeof result.config == 'object' && result.config !== null
              let typeofArray = Array.isArray(result.configList)
              this.enabled = result.status == 1 ? true : false
              if (typeofObject) this.config = result.config
              if (typeofArray) this.configList = result.configList
            }
          } else {
            this.configList = [{ alarmType: '红色告警' }, { alarmType: '橙色告警' }, { alarmType: '黄色告警' }]
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 切换模型配置项
    callback(val) {
      this.enabled = true
      this.config = {}
      this.configList = []
      this.initForm()
    },
    // 监听路由变化
    getRouteQuery($route) {
      let routePath = $route.path
      // 行为管控模型配置
      if (routePath === this.routePath1) {
        this.activeKey = 1
        // 情报挖掘模型配置
      } else if (routePath === this.routePath2) {
        this.activeKey = 12
      }
      this.initTabTypes(routePath)
      this.initForm()
    },
    preInput(e, key, max) {
      // console.log(key, max)
      // if (Number(e.target.value) < 1) {
      //   if (this.activeKey === 1) {
      //     this['form' + this.activeKey][this.trip][key] = 0
      //   } else {
      //     this['form' + this.activeKey][key] = 0
      //   }
      // } else if (Number(e.target.value) > max) {
      //   if (this.activeKey === 1) {
      //     this['form' + this.activeKey][this.trip][key] = max
      //   } else {
      //     this['form' + this.activeKey][key] = max
      //   }
      // } else {
      //   console.log(e.target.value)
      //   let value = e.target.value.replace(/\D+/, '')
      //   if (this.activeKey === 1) {
      //     if (value > max) {
      //       this['form' + this.activeKey][this.trip][key] = Number(max)
      //     } else {
      //       this['form' + this.activeKey][this.trip][key] = Number(value)
      //     }
      //   } else {
      //     if (value > max) {
      //       this['form' + this.activeKey][key] = Number(max)
      //     } else {
      //       this['form' + this.activeKey][key] = Number(value)
      //     }
      //   }
      // }
    }
  }
}
</script>

<style lang="less" scoped>
.input {
  width: 100px;
  margin: 0 6px;

  &.time {
    width: 110px;
  }
}

.select {
  width: 100px !important;
  margin: 0 10px;

  &.area {
    width: 200px;
  }
}

:deep(.numeric-input .ant-tooltip-inner) {
  min-width: 32px;
  min-height: 37px;
}

:deep(.numeric-input .numeric-input-title) {
  font-size: 14px;
}

.ant-tabs {
  :deep(.ant-tabs-bar) {
    background-color: #fff;
    margin-right: 10px;

    &.ant-tabs-left-bar {
      min-height: 550px;
      border-left: 1px #e8e8e8 solid;
      border-top: 1px #e8e8e8 solid;
    }

    .ant-tabs-tab {
      padding-top: 12px !important;
      padding-bottom: 12px !important;
      // padding-left: 0 !important;
      margin-bottom: 0 !important;
      text-align: left !important;
      border-bottom: 1px #e8e8e8 solid;

      .tab-img {
        border: 1px rgb(166, 222, 214) solid;
        border-radius: 50%;
        padding: 10px;
        margin-right: 10px;

        &.org {
          border: 1px rgb(250, 173, 20) solid;
        }
      }

      &.ant-tabs-tab-active {
        background-color: #eef7ff;
      }
    }
  }

  :deep(.ant-tabs-content) {
    padding-top: 30px;
    min-height: 550px;
    background-color: #fff;
  }

  .submit-form-model-item {
    margin-top: 100px;

    .ant-form-item-control {
      text-align: right;
    }
  }
}
</style>
